<ion-header class="wide-header">
  <ion-navbar>
    <ion-title class="bp-title">
      <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
        <img src="assets/img/coinbase/coinbase-logo.png" width="70">
      </div>
    </ion-title>
    <ng-content select="[right]"></ng-content>
  </ion-navbar>
</ion-header>

<ion-content #scrollArea no-bounce>
  <div class="wrapper">
    <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
      <ion-toolbar class="wide-header__title">
        <expandable-header-primary>
          <img src="assets/img/coinbase/coinbase-logo.png" width="150">
          <div class="email-account" *ngIf="linkedAccount">{{data?.user?.email || '...'}}</div>
        </expandable-header-primary>
      </ion-toolbar>
    </expandable-header>

    <ion-list class="bp-list">
      <ion-item>
        <ion-label>{{'Show on wallet tab' | translate}}</ion-label>
        <ion-toggle [(ngModel)]="showInHome" (ionChange)="showInHomeSwitch()"></ion-toggle>
      </ion-item>
    </ion-list>

    <div *ngIf="hasCredentials && !linkedAccount" class="connect-button">
      <button ion-button class="button-standard" (click)="goToCoinbase()">
        <span translate>Connect Coinbase Account</span>
      </button>
    </div>
    <div *ngIf="!hasCredentials && !linkedAccount" text-center translate>
      Missing Credentials
    </div>

    <ion-list *ngIf="linkedAccount" class="bp-list">
      <ion-item>
        <ion-label>{{'Name' | translate}}</ion-label>
        <ion-note item-end>
          {{ data?.user?.name }}
        </ion-note>
      </ion-item>
      <ion-item>
        <ion-label>{{'Native Currency' | translate}}</ion-label>
        <ion-note item-end>
          {{ data?.user?.native_currency }}
        </ion-note>
      </ion-item>
      <ion-item>
        <ion-label>{{'Country' | translate}}</ion-label>
        <ion-note item-end>
          {{ data?.user?.country?.name }}
        </ion-note>
      </ion-item>
    </ion-list>

    <button *ngIf="linkedAccount" ion-button class="button-standard" color="danger" (click)="revokeToken()">
      {{'Log out' | translate}}
    </button>

  </div>
</ion-content>
